<template>
  <div :id="id" class="orderArea"></div>
</template>
<script>
import echarts from "echarts";
import echartsTheme from "@/plugins/wyz-echarts/theme/sweet-light.json";
export default {
  props: ["datatype"],
  data: () => ({
    id: "pieChart",
    myChart: null
  }),
  watch: {
    type: v => {
      this.initOption(v);
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  mounted() {
    this.loadChart();
  },
  methods: {
    loadChart() {
      this.$nextTick(() => {
        echarts.registerTheme("westeros", echartsTheme);
        this.myChart = echarts.init(
          document.getElementById(this.id),
          "westeros"
        );
        this.myChart.setOption(this.initOption(this.type));
      });
    },
    initOption(type = "Asset") {
      let text, legend_data, series_data;
      if (type == "Asset") {
        text = "资产监控";
        legend_data = ["正常", "告警"];
        series_data = [
          { value: 4, name: "正常" },
          { value: 2, name: "告警" }
        ];
      } else if (type == "Reader") {
        text = "网关监控 (30)";
        legend_data = ["正常", "心跳中断", "网络异常"];
        series_data = [
          { value: 25, name: "正常" },
          { value: 3, name: "心跳中断" },
          { value: 2, name: "网络异常" }
        ];
      }
      let data = {
        title: {
          text: text,
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: legend_data
        },
        label: {
          show: true,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold"
          }
        },
        series: [
          {
            name: text,
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "60%"],
            data: series_data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      return data;
    }
  }
};
</script>
